.todoList {
  width: 500px;
  margin: 20px auto;
  border: 1px solid skyblue;

  .addtodo {
    .item {
      height: 40px;
      line-height: 40px;
      padding: 10px 20px;

      input {
        width: 100%;
        height: inherit;
        line-height: inherit;
        box-sizing: border-box;
        text-indent: 8px;
      }
    }
  }

  .todoItem {

    li {

      display: flex;
      margin-top: 5px;
    }

    .level {
      margin-left: 10px;
      color: #333;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      box-shadow: 0 0 1px;
      display: block;
      background: #eaea;
      text-align: center;
      font-size: 12px;
      color:#fff;
      
    }
    .level1 {
      background: red;

    }

    .level2 {
      background: green;

    }

    .level3 {
      background: blue;
      // rgb(37, 201, 234);

    }
  }

  .levelOn {
    display: flex;
    justify-content: space-between;

    span {
      display: block;
      width: 40px;
      height: 40px;
      background-color: skyblue;
      line-height: 40px;
      cursor: pointer;
      margin-right: 3px;
      text-align: center;
      border-radius: 30%;

    }
  }


}